import React, { useState } from 'react'
import { Button, Input, Form, Toast } from 'react-vant'
import { useNavigate } from "react-router-dom"
import axios from "../uilst/axios"
type Props = {}

const Register = (props: Props) => {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const onFinish = async (values: any) => {
        console.log(values)
        const res = await axios.post("/register", values);
        console.log(res);
        if (res.data.code === 200) {
            Toast.success(res.data.msg);
            navigate("/loding");
        } else {
            Toast.fail(res.data.msg);
        }
    }
    return (
        <div>  <Form
            form={form}
            onFinish={onFinish}
            footer={
                <div style={{ margin: '16px 16px 0' }}>
                    <Button round nativeType='submit' type='primary' block>
                        注册
                    </Button>
                </div>
            }
        >
            <Form.Item
                rules={[{ required: false, message: '请填写用户名' }]}
                name='username'
                label='用户名&nbsp;:'
            >
                <Input placeholder='请输入用户名' />
            </Form.Item>
            <Form.Item
                rules={[{ required: false, message: '请填写密码' }]}
                name='password'
                label='密码&emsp;&nbsp;:'
            >
                <Input placeholder='请输入密码' />
            </Form.Item>
        </Form></div>
    )
}

export default Register